<template>
  <div>
    <div class="sider-footer">
      {{ dianjinForm.name }}
      <i class="el-icon-edit" @click="handleUpdate()"></i>
    </div>

    <!--会话根据conversations里面createTime: "2025-03-17 09:53:06" 分成 今天/七日内/30天内/本年/2024年/2023年显示 -->
    <div class="sider-container">
      <!-- 编排 -->
      <div class="header">
        <!-- 左对齐 -->
        <div class="left-item label">编排</div>
        <!-- 右对齐 -->
        <div @click="changeModal" class="right-item">
          <!-- {{ getLabelfromValue(modelList, modalForm.modelId)}} -->
          {{modalForm.modelId
          }}<i class="el-icon-arrow-down"></i>
        </div>
      </div>
      <div class="editor-modal">
        <div class="header">
          <p class="subtitle">
            指引 & 提示词
            <el-tooltip
              class="item"
              effect="dark"
              content="提示词内可以通过$符号引用用户输入的变量"
              placement="top-start"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </p>
        </div>
        <div class="spin-container content">
          <div class="spin-content-wrapper">
            <textarea
              v-model="instruction"
              class="input-area"
              placeholder="输入提示词"
              autofocus=""
              @change="handleChangeInstruction"
            ></textarea>
          </div>
          <!---->
        </div>
      </div>
      <div
        class="editor-config"
        :key="index"
        v-for="(item, index) in configlist"
      >
        <TemplateContent
          @change-type="changeType"
          :title="item.title"
          :handleType="item.handleType"
          :value="getValueForItem(item)"
          :description="item.description"
          :type="item.type"
          :list="getListForItem(item)"
        ></TemplateContent>
      </div>
      <div class="editor-config">
        <div class="templateContent">
          <div class="header">
            <!-- 左对齐 -->
            <div class="left-item label"> 文档库</div>
            <!-- 右对齐 -->
            <div  class="right-item">
              <el-select @change="changeLibraryConfig" v-model="useLibraryIds" multiple placeholder="关联知识库">
                <el-option
                  v-for="item in knowledgeBasesList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            
          </div>
          <div class="description">
            选择通过文档库模块构建好的文档库
          </div>
        </div>
      </div>
      <div class="editor-config">
        <div class="header">
          <!-- 左对齐 -->
          <div class="left-item label">欢迎信息</div>
        </div>
        <div class="description">
          用户打开对话应用时，向用户介绍一下这款应用可以做什么。
        </div>
      </div>
      <div class="welcome">
        <div class="label">欢迎信息</div>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="欢迎语"
          v-model="welcomeConfig.welcomeText"
          @change="handleChangeWelcomeConfig"
        >
        </el-input>
        <div class="label">建议如何使用</div>
        <el-input style="margin-bottom: 10px;" v-for="(input, index) in welcomeConfig.questions" 
          :key="index"
          v-model="welcomeConfig.questions[index]" 
          @change="handleChangeWelcomeConfig"
          placeholder="此处输入提问建议">
          <template #append>
            <el-button @click="removeQuestion(index)" icon="el-icon-remove" circle></el-button>
          </template>
        </el-input>
      </div>
    </div>
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form
        ref="dianjinForm"
        :model="dianjinForm"
        :rules="dianjinRules"
        label-width="120px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="dianjinForm.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="权限配置" prop="roleIdList">
          <el-select
            multiple
            v-model="dianjinForm.roleIdList"
            placeholder="请选择角色"
            clearable
            style="width: 240px"
          >
            <!-- @change="handleChangeSelect" -->
            <el-option
              v-for="dict in roleList"
              :key="dict.roleId"
              :label="dict.roleName"
              :value="dict.roleId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="功能介绍" prop="description">
          <el-input
            type="textarea"
            placeholder="请输入功能介绍"
            v-model="dianjinForm.description"
            show-word-limit
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDainjinForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 修改modal对话框 -->
    <el-dialog
      title="模型配置"
      :visible.sync="modalOpen"
      width="700px"
      append-to-body
    >
      <el-form
        ref="modalForm"
        :model="modalForm"
        label-width="130px"
      >
        <el-form-item label="选择LLM模型" prop="modelId">
          <el-select
            v-model="modalForm.modelId"
            placeholder="请选择LLM模型"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="dict in modelList"
              :key="dict.value"
              :label="dict.name"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="temperature">
          <template #label>
            <span>随机性</span>
            <el-tooltip
              class="item"
              effect="dark"
              content="控制随机性：降低结果会导致完成的内容较少随机。随着温度趋近于零，模型将变得确定性和重复性。"
              placement="top-start"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
          <el-slider
            v-model="modalForm.temperature"
            :precision="2"
            :step="0.1"
            :min="0"
            :max="1"
            show-input
          >
          </el-slider>
        </el-form-item>
        <el-form-item prop="responseMaxLength">
          <template #label>
            <span>响应最大长度</span>
            <el-tooltip
              class="item"
              effect="dark"
              content="提示和完成之间要生成的最大令牌数量。确切的限制因模型而异。（一个令牌大约相当于标准英文文本的4个字符）"
              placement="top-start"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
          <el-slider
            v-model="modalForm.responseMaxLength"
            :min="1"
            :max="4096"
            show-input
          >
          </el-slider>
        </el-form-item>
        <el-form-item prop="dialogRound">
          <template #label>
            <span>携带上下文轮数</span>
            <el-tooltip
              class="item"
              effect="dark"
              content="选择您希望模型记住的对话轮数。"
              placement="top-start"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
          <el-slider
            v-model="modalForm.dialogRound"
            :min="0"
            :max="30"
            show-input
          >
          </el-slider>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitModalForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 文档库对话框 -->
    <!-- <el-dialog
      title="文档库选择"
      :visible.sync="libraryOpen"
      width="400px"
      append-to-body
    >
      <el-select v-model="useLibraryIds" multiple placeholder="关联知识库">
        <el-option
          v-for="item in knowledgeBasesList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeLibraryConfig">确 定</el-button>
      </div>
    </el-dialog> -->
    <!-- 变量对话框 -->
    <el-dialog
      title="编辑变量"
      :visible.sync="varsOpen"
      width="900px"
      custom-class="vars-dialog"
      append-to-body
    >
    <!-- @tab-click="handleClick" -->
      <el-tabs v-model="activeName" >
        <el-tab-pane label="模型记忆变量" name="Vars">
          <div  class="vars-desc">
            由模型根据对话历史自动抽取设置，用户不需要参与维护。设置后会作为模型记忆，辅助模型做出更友好的回答。
          </div>
          <div class="table-box">
            <div class="table-header">
              <el-row>
                <el-col :span="6"
                  ><div class="grid-content bg-purple">名称</div></el-col
                >
                <el-col :span="6"
                  ><div class="grid-content bg-purple"></div>
                  描述</el-col
                >
                <el-col :span="6"
                  ><div class="grid-content bg-purple-light">
                    默认值
                  </div></el-col
                >
                <el-col :span="6"
                  ><div class="grid-content bg-purple-light">操作</div></el-col
                >
              </el-row>
            </div>
            <div>
              <el-row style="margin-bottom: 10px;"
              v-for="(varItem, index) in getModelVars" 
              :key="index">
                <el-col :span="6" style="padding: 0 10px;">
                  <el-input 
                    v-model="varItem.name" 
                    placeholder="请输入变量名称"></el-input>
                </el-col>
                <el-col :span="6" style="padding: 0 10px;"
                  ><el-input 
                    v-model="varItem.description" 
                    placeholder="变量描述，帮助模型更好理解"></el-input>
                  </el-col
                >
                <el-col :span="6" style="padding: 0 10px;"
                  ><el-input 
                    v-model="varItem.defaultValue" 
                    placeholder="变量默认值，可以留空"></el-input></el-col
                >
                <el-col :span="6" style="padding: 0 10px;"
                  ><div class="grid-content bg-purple-light">
                    <i @click="deleteVar(index)" class="el-icon-delete"></i></div
                ></el-col>
              </el-row>
              <el-button @click="addVar" icon="el-icon-plus" style="margin-top: 10px;">新增</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="用户输入变量" name="userInput">
          <div class="vars-desc">
            变量需要用户使用智能体时主动提供输入值，这些变量可以在指引提示词中被引用。
          </div>
          <div  class="table-box">
            <div class="table-header">
              <el-row>
                <el-col :span="6"
                  ><div class="grid-content bg-purple">名称</div></el-col
                >
                <el-col :span="6"
                  ><div class="grid-content bg-purple-light">类型</div></el-col
                >
                <el-col :span="6"
                  ><div class="grid-content bg-purple"></div>
                  描述</el-col
                >
                <el-col :span="3"
                  ><div class="grid-content bg-purple-light">必填</div></el-col
                >
                <el-col :span="3"
                  ><div class="grid-content bg-purple-light">操作</div></el-col
                >
              </el-row>
            </div>
            <div>
              <el-row style="margin-bottom: 10px;"
                v-for="(inputItem, index) in getModelInputs" 
                :key="index">
                <el-col :span="6" style="padding: 0 10px;"
                  > <el-input 
                    v-model="inputItem.name" 
                    placeholder="请输入变量名称"></el-input></el-col
                >
                <el-col :span="6" style="padding: 0 10px;"
                  > <el-select v-model="inputItem.type" placeholder="请选择">
                      <el-option
                        label="字符"
                        value="String">
                      </el-option>
                      <el-option
                        label="数字"
                        value="Number">
                      </el-option>
                    </el-select></el-col
                >
                <el-col :span="6" style="padding: 0 10px;"
                  ><el-input 
                    v-model="inputItem.description" 
                    placeholder="介绍一下这个变量，让用户理解该如何输入"></el-input></el-col
                >
                <el-col :span="3" style="padding: 0 10px;"
                  ><div class="grid-content bg-purple-light">
                    <el-switch
                      v-model="inputItem.required"
                      active-color="#409eff"
                      inactive-color="#ccc"
                    >
                    </el-switch></div
                ></el-col>
                <el-col :span="3" style="padding: 0 10px;"
                  ><div class="grid-content bg-purple-light">
                    <i @click="deleteInput(index)"  class="el-icon-delete"></i></div
                ></el-col>
              </el-row>
              <el-button @click="addInput" icon="el-icon-plus" style="margin-top: 10px;">新增</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeVarsOrInputConfig">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
    
<script>
import {
  getDianjinBaseByBotId,
  updateDianjinBase, // 修改agent
  text2image, // 工具-文生图
  webSearch, // 工具-搜索
  setFileChat, // 智能体管理-文件问答
  setLongTermMemory, // 智能体管理-开启长期记忆
  addLibrary, // 智能体管理-关联文档库
  changeWelcomeConfig, // 智能体管理-欢迎语
  changeInstruction, // 智能体管理-提示词
  changeInputsConfig, // 智能体管理-用户输入变量
  changeVarsConfig, // 智能体管理-变量
  changeModelConfig, // 智能体管理-模型：
} from "@/api/ai/dianjin";
import TemplateContent from "./template.vue";
// import { getLabel, getNameFromValue } from "@/utils/index";
export default {
  components: {
    TemplateContent,
  },
  
  data() {
    return {
      // 编辑会话的ID和标题
      activeName: "Vars",
      varsConfig: [
            { 
              name: "用户输入变量",
              vars: []
            },
            {
              name: "模型记忆变量",
              vars: [],
            }
      ],
      dianjinForm: {},
      botId: "",
      //   搜索引擎
      webSearcher: false,
      toolText2image: false,
      enableLongTermMemory: false,
      enableFileChat: false,
      // 提示词
      instruction: "",
      welcomeConfig:{
        botId:'',
        welcomeText:'',
        questions:null
      },
      modalForm: {},
      title: "修改Agent",
      // 表单校验
      dianjinRules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        description: [
          { required: true, message: "描述不能为空", trigger: "blur" },
        ],
      },
      // 是否显示弹出层
      varsOpen: false,
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层
      modalOpen: false,
      // 是否显示文档库弹出层
      libraryOpen: false,
      // 是否显示变量弹出层
      varsOpen: false,
      // 模型列表
      modelList: [],
      // 角色列表
      roleList: [],
      // 知识库列表
      knowledgeBasesList: [],
      useLibraryIds: [],
      configlist: [
        {
          title: "变量",
          type: "Vars",
          handleType: "plus",
          description: "通过变量功能开启记忆能力，实现更个性化的智能体。",
        },
        {
          title: "搜索引擎",
          handleType: "switch",
          type: "webSearch",
          description: "模型学会在必要时使用搜索引擎，获取更准确的结果",
        },
        {
          title: "文本生成图片",
          handleType: "switch",
          type: "text2image",
          description: "模型学会在需要生成图片时调用通义万象生成一张图片",
        },
        {
          title: "文件问答",
          handleType: "switch",
          type: "fileChat",
          description:
            "内置的文件问答服务，开启后会对用户上传的文件进行解析，模型在需要时会调用内置工具进行文件问答。",
        },
        {
          title: "开启长期记忆（Beta）",
          type: "longTermMemory",
          handleType: "switch",
          description:
            "每位用户在这个应用下的对话都会自动存储为长期记忆，每60秒进行一次记录。（发布后生效）",
        },
        // {
        //   title: "文档库",
        //   handleType: "plus",
        //   type: "library",
        //   description: "选择通过文档库模块构建好的文档库",
        // },
      ],
    };
  },
  watch: {
    webSearcher: 'updateSearchConfig',
    toolText2image: 'updateSearchConfig',
    enableFileChat: 'updateSearchConfig',
    enableLongTermMemory: 'updateSearchConfig',
  },
  computed: {
    // 动态获取模型记忆变量
    getModelVars() {
      const target = this.varsConfig.find(item => item.name === "模型记忆变量");
      return target ? target.vars : [];
    },
    getModelInputs() {
      const target = this.varsConfig.find(item => item.name === "用户输入变量");
      return target ? target.vars : [];
    },
    //  // 将依赖项组合成一个对象
    //  searchConfig() {
    //   return {
    //     webSearcher: this.webSearcher,
    //     toolText2image: this.toolText2image,
    //     enableFileChat: this.enableFileChat,
    //     enableLongTermMemory: this.enableLongTermMemory,
    //   };
    // },
    // getValueForItem() {
    //   return (item) => {
    //     console.log('getValueForItem',item.title,this.searchConfig)
    //     if (item.title === '搜索引擎') {
    //       return this.searchConfig.webSearcher;
    //     } else if (item.title === '文本生成图片') {
    //       return this.searchConfig.toolText2image;
    //     } else if (item.title === '文件问答') {
    //       return this.searchConfig.enableFileChat;
    //     } else if (item.title === '开启长期记忆（Beta）') {
    //       return this.searchConfig.enableLongTermMemory;
    //     }
    //     return false; // 默认返回空数组或其他默认值
    //   };
    // },
  },
  mounted() {
    const id = this.$route.params && this.$route.params.id;
    this.getDianjinBase(id);
    const storedData1 = localStorage.getItem("knowledgeBasesList");
    const storedData2 = localStorage.getItem("modelList");
    const storedData3 = localStorage.getItem("roleList");
    if (storedData1) {
      try {
        this.knowledgeBasesList = JSON.parse(storedData1);
      } catch (error) {
        console.error("解析数据时出错:", error);
      }
    }
    if (storedData2) {
      try {
        this.modelList = JSON.parse(storedData2);
      } catch (error) {
        console.error("解析数据时出错:", error);
      }
    }
    if (storedData3) {
      try {
        this.roleList = JSON.parse(storedData3);
      } catch (error) {
        console.error("解析数据时出错:", error);
      }
    }
  },
  methods: {
    getDianjinBase(id) {
      getDianjinBaseByBotId(id).then(res=>{
        // console.log('getDianjinBaseByBotId',res.data)
        if (res.code === 200) {
          this.botId = res.data.botId;
          this.id = res.data.id;
          this.dianjinForm = {
            botId: res.data.botId,
            id: res.data.id,
            name: res.data.name,
            roleIdList: res.data.roleIdList,
            description: res.data.description,
            botMode: 0,
          };
          this.modalForm = {
            id: res.data.id,
            botId: res.data.botId,
            modelId: res.data.modelId,
            temperature: res.data.temperature,
            responseMaxLength: res.data.responseMaxLength,
            dialogRound: res.data.dialogRound,
          };
          const questions = res.data.questions?JSON.parse(res.data.questions).concat(''):[''];
          this.welcomeConfig = {
            botId: res.data.botId,
            id: res.data.id,
            welcomeText: res.data.welcomeText,
            questions: questions,
          }
          this.$emit('update-welcome-config', this.welcomeConfig);
          this.varsConfig[0].vars = JSON.parse(res.data.inputs)||[];
          this.varsConfig[1].vars = JSON.parse(res.data.vars)||[];
          this.instruction = res.data.instruction;
          this.useLibraryIds = res.data.knowledgeBases;
          
          this.webSearcher = res.data.toolWebSearch?true:false;
          this.toolText2image = res.data.toolText2image?true:false;
          this.enableLongTermMemory = res.data.enableLongTermMemory;
          this.enableFileChat = res.data.enableFileChat;
          // console.log('this.webSearcher',this.webSearcher)
          // console.log('this.toolText2image',this.toolText2image)
          // console.log('this.enableLongTermMemory',this.enableLongTermMemory)
          // console.log('this.enableFileChat',this.enableFileChat)

        }
    })
    },
    getValueForItem(item) {
      if (item.title === '搜索引擎') {
        return this.searchConfig&&this.searchConfig.webSearcher;
      } else if (item.title === '文本生成图片') {
        return this.searchConfig&&this.searchConfig.toolText2image;
      } else if (item.title === '文件问答') {
        return this.searchConfig&&this.searchConfig.enableFileChat;
      } else if (item.title === '开启长期记忆（Beta）') {
        return this.searchConfig&&this.searchConfig.enableLongTermMemory;
      }
      return false; // 默认返回空数组或其他默认值
    },
    updateSearchConfig() {
      this.searchConfig = {
        webSearcher: this.webSearcher,
        toolText2image: this.toolText2image,
        enableFileChat: this.enableFileChat,
        enableLongTermMemory: this.enableLongTermMemory,
      };
    },
    // getValueForItem(item) {
    //   console.log('getValueForItem',item.title)
    //   if (item.title === '搜索引擎') {
    //     return this.webSearcher;
    //   } else if (item.title === '文本生成图片') {
    //     return this.toolText2image;
    //   } else if (item.title === '文件问答') {
    //     return this.enableFileChat;
    //   } else if (item.title === '开启长期记忆（Beta）') {
    //     return this.enableLongTermMemory;
    //   }
    //   return false; // 默认返回空数组或其他默认值
    // },
    getListForItem(item) {
      if (item.title === '变量') {
        if(this.varsConfig[0].vars&&this.varsConfig[0].vars.length>0||this.varsConfig[1].vars&&this.varsConfig[1].vars.length>0){
          return this.varsConfig;
        }
        return [];
      } else if (item.title === '文档库') {
        return this.useLibraryIds;
      }
      return []; // 默认返回空数组或其他默认值
    },
    deleteVar(index) {
      if (this.getModelVars.length > index) {
        this.getModelVars.splice(index, 1);
      }
    },
    addVar() {
      const newVar = {
        name: "",
        description: "",
        defaultValue: ""
      };
      console.log('this.getModelVars',this.getModelVars)
      this.getModelVars.push(newVar);
    },
    deleteInput(index) {
      if (this.getModelInputs.length > index) {
        this.getModelInputs.splice(index, 1);
      }
    },
    addInput() {
      const newVar = {
        name: "",
        type: "String",
        description: "",
        required: true
      };
      this.getModelInputs.push(newVar);
    },
    // 字典显示的方法
    // getLabelfromValue(dict, value) {
    //   console.log(111,dict, value)
    //   return getLabel(dict, value);
    // },
    // addQuestion() {
    //   this.welcomeConfig.questions.push(""); // 添加一个新的空字符串
    // },
    removeQuestion(index) {
      if(this.welcomeConfig.questions.length>1&&index!==this.welcomeConfig.questions.length-1){
        this.welcomeConfig.questions.splice(index, 1); // 删除指定索引的提问建议
      }
    },
    changeModal() {
      this.modalOpen = true;
    },
    handleUpdate() {
      this.open = true;
    },
    changeType(type, value) {
      switch (type) {
        case "Vars":
          this.handleChangeVars();
          break;
        case "webSearch":
          this.handleSwitchWebSearch(value);
          break;
        case "text2image":
          this.handleSwitchText2image(value);
          break;
        case "fileChat":
          this.handleSwitchFileChat(value);
          break;
        case "longTermMemory":
          this.handleSwitchLongTermMemory(value);
          break;
        case "library":
          this.handleChangelibrary();
          break;
        default:
          break;
      }
    },
    // 智能体管理-提示词
    handleChangeInstruction(value) {
      const params = {
        id: this.id,
        botId: this.botId,
        instruction: this.instruction,
      };
      // console.log("handleChangeInstruction", value);
      changeInstruction(params).then((response) => {
        // console.log("handleChangeInstructionresponse", response);
      });
    },
    // 智能体管理-设置变量
    handleChangeVars() {
      this.varsOpen = true;
    },
    changeVarsOrInputConfig(){
        if(this.activeName=='Vars'){
          console.log("handleChangeVars",this.getModelVars);
          const params = {
            id: this.id,
            botId: this.botId,
            "vars": this.getModelVars,
          };
  // 智能体管理-变量
        changeVarsConfig(params).then((response) => {
          this.varsOpen=false
          console.log("handleChangeVarsresponse",response);
          // if (value) {
          //     this.$modal.msgSuccess("修改成功");
          //   } else {
          //     this.$modal.msgSuccess("修改失败");
          //   }
          })
      }else{
        console.log("handleChangeINput",this.getModelInputs);
          const params = {
            id: this.id,
            botId: this.botId,
            "inputs": this.getModelInputs,
          };
       // 智能体管理-用户输入变量
        changeInputsConfig(params).then((response) => {
          this.varsOpen=false
          console.log("handleChangeINputresponse",response);  
          // if (value) {
            //   this.$modal.msgSuccess("修改成功");
            // } else {
            //   this.$modal.msgSuccess("修改失败");
            // }
          });
      }

      
    },
    // 智能体管理-欢迎语
    handleChangeWelcomeConfig() {
      // console.log("handleChangeWelcomeConfig");
      this.welcomeConfig.questions = this.welcomeConfig.questions.filter(item => item !== '');
      this.$emit('update-welcome-config', this.welcomeConfig);
      changeWelcomeConfig(this.welcomeConfig).then((response) => {
        // console.log("handleChangeWelcomeConfigresponse",response);  
        this.welcomeConfig.questions.push("");
        });
    },
    // 智能体管理-关联文档库
    handleChangelibrary() {
      this.libraryOpen = true;
    },
    // 智能体管理-关联文档库
    changeLibraryConfig() {
      console.log("changeLibraryConfig");
//       {
//   "botId": "39xzdmkewg",
//   "libraryId": "ojenkldeqr"
// }
// removeLibrary
      const params = {
        botId: this.botId,
        id: this.id,
        useLibraryIds: this.useLibraryIds
      };
      addLibrary(params).then((response) => {
        // console.log("changeLibraryConfigsponse", response);
      });
    },

    // 工具-搜索
    handleSwitchWebSearch(value) {
      // console.log("handleSwitchWebSearch", value);
      const param = {
        id: this.id,
        botId: this.botId,
        toolWebSearch: "web_search",
        enable: value ? 1 : 0,
      };
        webSearch(param).then((response) => {
          // console.log("handleSwitchWebSearchresponse", response);
          // if (value) {
          //   this.$modal.msgSuccess("修改成功");
          // } else {
          //   this.$modal.msgSuccess("修改失败");
          // }
        });
    },
    // 工具-文生图
    handleSwitchText2image(value) {
      // console.log("handleSwitchText2image", value);
      this.toolText2image = value;
      const param = {
        botId: this.botId,
        id: this.id,
        toolText2image: "text2image",
        enable: value ? 1 : 0,
      };
        text2image(param).then((response) => {
          // console.log("handleSwitchText2imageresponse", response);
          // if (value) {
          //   this.$modal.msgSuccess("修改成功");
          // } else {
          //   this.$modal.msgSuccess("修改失败");
          // }
        });
    },
    // 智能体管理-文件问答
    handleSwitchFileChat(value) {
      // console.log("handleSwitchFileChat", value);
      this.enableFileChat = value;
      const param = {
        id: this.id,
        botId: this.botId,
        enableFileChat: value,
      };
        setFileChat(param).then((response) => {
          // console.log("handleSwitchFileChatresponse", response);
          // if (value) {
          //   this.$modal.msgSuccess("修改成功");
          // } else {
          //   this.$modal.msgSuccess("修改失败");
          // }
        });
    },
    // 智能体管理-开启长期记忆
    handleSwitchLongTermMemory(value) {
      // console.log("handleSwitchLongTermMemory", value);
      this.enableLongTermMemory = value;
      const param = {
        id: this.id,
        botId: this.botId,
        enableLongTermMemory: value,
      };
      setLongTermMemory(param).then((response) => {
          // console.log("handleSwitchLongTermMemoryresponse", response);
          // if (value) {
          //   this.$modal.msgSuccess("修改成功");
          // } else {
          //   this.$modal.msgSuccess("修改失败");
          // }
        });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.modalOpen = false;
      this.varsOpen = false;
      this.libraryOpen = false;
      this.varsOpen = false;
    },
    /** 提交按钮 基本信息 */
    submitDainjinForm() {
      this.$refs["dianjinForm"].validate((valid) => {
        if (valid) {
          updateDianjinBase(this.dianjinForm).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
          });
        }
      });
    },
    /** 提交按钮  智能体管理-模型： */
    submitModalForm() {
      changeModelConfig(this.modalForm).then((response) => {
        this.$modal.msgSuccess("修改成功");
        this.modalOpen = false;
      });
    },
  },
};
</script>
    
    <style scoped lang="scss">

::v-deep .vars-dialog .el-dialog__body {
            padding-top: 0;
            .vars-desc{
                font-size: 14px;
                color: #777;
            }
            .table-box{
                background: #f1f1f1;
                border-radius: 8px;
                padding: 10px;
                margin-top: 20px;
            }
            .table-header{
                padding-bottom: 10px;
                margin-bottom: 10px;
                border-bottom: 1px solid #ccc;
            }
          }
.sider-icon {
  cursor: pointer;
}

.sider-container {
  height: calc(100vh - 176px);
  overflow-y: auto;
  color: #606266;
  padding: 0 10px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center; // 确保两个元素垂直居中对齐
  .left-item {
    text-align: left;
    font-weight: 700;
    color: #333;
  }
  .right-item {
    text-align: right;
  }
}
.welcome {
  padding-left: 20px;
  .label {
    font-size: 14px;
    color: #333;
  }
}
.description {
  font-size: 12px;
  color: #777;
}
.sider-footer {
  text-align: left;
  padding: 20px 10px;
  .el-button--info.is-plain {
    // background: #dbeafe;
    background: rgba(64, 158, 255, 1);
    border-radius: 32px 32px 32px 32px;
    border: none;
    color: #fff;
    // color: #409eff;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 16px;
    margin-left: 0;
    span {
      display: flex;
      align-items: center;
    }
  }
}
.editor-modal {
  --description-color: #5e6772;
  --content-bg: #ffffff;
  --content-border: #e5e5e5;
  --content-border-hover: #adadad;
  --name-bg: #f3f5fc;
  --intro-text: #5e6772;
  --action-text: #2e67fa;
}
.editor-modal {
  display: flex;
  flex-direction: column;
  height: 300px;
  .header {
    flex-shrink: 0;
    position: relative;
  }
  .subtitle {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 24px;
  }
  .description {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 20px;
    color: var(--description-color);
  }
  .content {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--content-border);
    background-color: var(--content-bg);
    transition: border-color 0.3s cubic-bezier(0.36, 0.66, 0.04, 1);
    cursor: text;
    // margin-bottom: 40px;
    .spin-content-wrapper {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
    }
  }
  .input-area {
    padding: 8.5px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    background-color: transparent;
    border: none;
    color: var(--text-primary);
    &:focus-visible {
      outline: none;
    }
  }
  .name-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: var(--name-bg);
    width: 100%;
  }
  .intro {
    color: var(--intro-text);
    padding: 12px;
    font-size: 12px;
    cursor: pointer;
    flex-grow: 1;
  }
  .input {
    padding-left: 12px;
    flex-grow: 1;
    border: none;
    outline: none;
    color: var(--text-primary);
    background-color: transparent;
  }
  .action {
    cursor: pointer;
    padding: 12px;
    color: var(--action-text);
    flex-shrink: 0;
  }
  .spin-container {
    position: relative;
  }
  .bottom {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
}
</style>
  <style lang="scss">
.treePopover.el-popover {
  min-width: 100px !important;
}

.treePopover.el-popover[x-placement^="right"] {
  margin-left: -6px;
  padding: 0;
  width: 100px !important;
  p {
    margin: 10px;
    cursor: pointer;
  }
}
.conversationInput {
  .el-input__inner {
    border-radius: 8px;
    padding-left: 8px;
  }
}
.sider-footer {
  .el-button--info.is-plain {
    span {
      display: flex;
      align-items: center;
    }
  }
}
.el-row{
  text-align: center;
}
</style>